<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多人贪吃蛇游戏</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
  <div id="game-container">
    <canvas id="game-canvas" width="400" height="400"></canvas>
  </div>
  
  <div id="game-info">
    <div id="coin-display">金币: 0</div>
    
    <div class="coin-converter">
      <h3>金币兑换</h3>
      <p>兑换比例: 10金币 = 1投币</p>
      <input type="number" id="convert-amount" placeholder="输入金币数量" min="10">
      <button id="convert-coins">兑换</button>
    </div>
  </div>

  <script>
    // 添加加载状态
    document.addEventListener('DOMContentLoaded', function() {
      const canvas = document.getElementById('game-canvas');
      if (!canvas || !canvas.getContext) {
        alert('无法初始化游戏画布，请使用现代浏览器');
        return;
      }
      
      // 检查脚本加载
      const script = document.createElement('script');
      script.src = "{{ url_for('static', filename='js/snake_game.js') }}";
      script.onerror = function() {
        alert('游戏脚本加载失败，请刷新重试');
      };
      document.body.appendChild(script);
    });
  </script>
</body>
</html>